<template>
  <div class="app-container">

    <!-- 搜索表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-form-item>
            <el-input v-model="searchObj.teacherName" clearable placeholder="教师姓名" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchObj.title" clearable placeholder="教师职称">
            <el-option label="特级教师" value="特级教师"></el-option>
            <el-option label="高级教师" value="高级教师"></el-option>
            <el-option label="中级教师" value="中级教师"></el-option>
            <el-option label="初级教师" value="初级教师"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchObj.position" clearable placeholder="教师职位">
            <el-option label="语文老师" value="语文老师"></el-option>
            <el-option label="数学老师" value="数学老师"></el-option>
            <el-option label="英语老师" value="英语老师"></el-option>
            <el-option label="体育老师" value="体育老师"></el-option>
            <el-option label="劳技老师" value="劳技老师"></el-option>
            <el-option label="历史老师" value="历史老师"></el-option>
            <el-option label="音乐老师" value="音乐老师"></el-option>
            <el-option label="美术老师" value="美术老师"></el-option>
            <el-option label="信息老师" value="信息老师"></el-option>
            <el-option label="自然老师" value="自然老师"></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="success" icon="el-icon-plus" @click="handleAddTeacher">新增</el-button>
      <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出
      </el-button>
    </el-form>

    <!-- 展示表格 -->
    <el-table :data="tableData" border stripestyle="width:100%" >
  
      <el-table-column type="index" width="50" label="序号" align="center"/>
      <el-table-column prop="teacherName" label="教师姓名" align="center"/>
      <el-table-column prop="gender" label="教师姓名"  align="center"/>
      <el-table-column prop="phoneNum" label="手机号" align="center"/>
      <el-table-column prop="position" label="职位" align="center"/>
      <el-table-column prop="title" label="职称" align="center"/>
      <el-table-column prop="role" label="角色" align="center"/>
      <el-table-column label="操作" width="280" align="center">
       <template slot-scope="scope">
         <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
         <el-button type="danger" style="margin-left:5px" size="mini" @click="handleDelete(scope.row.teacherId)">删除</el-button>
       </template>
      </el-table-column>
    
    </el-table>

    <!-- 编辑表单 -->
    <el-dialog title="请编辑信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="教师姓名"  :label-width="formLabelWidth">
                <el-input v-model="form.teacherName" ></el-input>
            </el-form-item>
            <el-form-item label="性别"  :label-width="formLabelWidth">
                <el-select v-model="form.gender">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职称" :label-width="formLabelWidth">
              <el-select  v-model="form.title" clearable placeholder="教师职称">
                <el-option label="特级教师" value="特级教师"></el-option>
                <el-option label="高级教师" value="高级教师"></el-option>
                <el-option label="中级教师" value="中级教师"></el-option>
                <el-option label="初级教师" value="初级教师"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
              <el-select v-model="form.position" clearable placeholder="教师职位">
                <el-option label="语文老师" value="语文老师"></el-option>
                <el-option label="数学老师" value="数学老师"></el-option>
                <el-option label="英语老师" value="英语老师"></el-option>
                <el-option label="体育老师" value="体育老师"></el-option>
                <el-option label="劳技老师" value="劳技老师"></el-option>
                <el-option label="历史老师" value="历史老师"></el-option>
                <el-option label="音乐老师" value="音乐老师"></el-option>
                <el-option label="美术老师" value="美术老师"></el-option>
                <el-option label="信息老师" value="信息老师"></el-option>
                <el-option label="自然老师" value="自然老师"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色"  :label-width="formLabelWidth">
                <el-input v-model="form.role" ></el-input>
            </el-form-item>
            <el-form-item label="手机号"  :label-width="formLabelWidth">
                <el-input v-model="form.phoneNum" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSure">确 定</el-button>
        </div>
    </el-dialog>

     <!-- 新增表单 -->
        <el-dialog title="请编辑信息" :visible.sync="addFormVisible">
            <el-form :model="addForm">
                <el-form-item label="教师姓名"  :label-width="formLabelWidth">
                    <el-input v-model="addForm.teacherName" ></el-input>
                </el-form-item>
                <el-form-item label="性别"   :label-width="formLabelWidth">
                    <el-select v-model="addForm.gender" placeholder="性别">
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职称" :label-width="formLabelWidth">
                  <el-select  v-model="addForm.title" clearable placeholder="教师职称">
                    <el-option label="特级教师" value="特级教师"></el-option>
                    <el-option label="高级教师" value="高级教师"></el-option>
                    <el-option label="中级教师" value="中级教师"></el-option>
                    <el-option label="初级教师" value="初级教师"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                  <el-select v-model="addForm.position" clearable placeholder="教师职位">
                    <el-option label="语文老师" value="语文老师"></el-option>
                    <el-option label="数学老师" value="数学老师"></el-option>
                    <el-option label="英语老师" value="英语老师"></el-option>
                    <el-option label="体育老师" value="体育老师"></el-option>
                    <el-option label="劳技老师" value="劳技老师"></el-option>
                    <el-option label="历史老师" value="历史老师"></el-option>
                    <el-option label="音乐老师" value="音乐老师"></el-option>
                    <el-option label="美术老师" value="美术老师"></el-option>
                    <el-option label="信息老师" value="信息老师"></el-option>
                    <el-option label="自然老师" value="自然老师"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="角色"  :label-width="formLabelWidth">
                  <el-select v-model="addForm.role" clearable placeholder="班主任">
                    <el-option label="班主任" value="班主任"></el-option>
                    <el-option label="任课老师" value="任课老师"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="手机号"  :label-width="formLabelWidth">
                    <el-input v-model="addForm.phoneNum" ></el-input>
                </el-form-item>
                  <el-form-item label="登录账户"  :label-width="formLabelWidth">
                    <el-input v-model="addForm.username" ></el-input>
                </el-form-item>  <el-form-item label="登录密码"  :label-width="formLabelWidth">
                    <el-input v-model="addForm.password" ></el-input>
                </el-form-item>
              
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleAddSure">确 定</el-button>
            </div>
        </el-dialog>

    <!-- 分页 -->
    <el-pagination
      background
      :current-page="page"
      layout="prev, pager, next"
      style="padding: 30px 0; text-align: center;"
      :total="total"
      @current-change="getList">
    </el-pagination>
  </div>
</template>

<script>
import { getTeacherListByPage,
         addTeacher, 
         editTeacher, 
         deleteTeacher, 
         getTeacherExcel
       } from '@/api/managementModule/teacher';

export default {
  data(){
    return {
      limit: 10,
      searchObj: {}, // 条件搜索对象
      currentPage: 1, //当前页
      page: 1, //分页组件页码初始化
      addFormVisible: false,
      addForm: {},
      tableData:[],
      total: 20,
      formLabelWidth: '120px',
      classMapping:{},
      activityStateMapping: {
        0: '待开始',
        1: '待评分',
        2: '已完成'
      },
      downloadLoading: false, // 导出按钮
      dialogFormVisible: false, //编辑表单
      form: {}, //表单信息
    }
  },
  created(){
    this.getList();
  },
  methods: {
    getList(page = 1){
      this.currentPage = page;
      const payload = {
        pageSize: 10,
        pageNum: this.currentPage,
        ...this.searchObj,
      }
      getTeacherListByPage(payload).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.list.map(item => {
          return {
            ...item,
            gender: item.gender == 0 ? '女' : '男',
          }
        })
      })
    },
    handleAddSure(){
      addTeacher(this.addForm).then(res => {
        this.$message({
              message: '添加成功',
              type: 'success'
            });
          this.getList();
      })
      this.addFormVisible = false;
    },
    handleAddTeacher(){
      this.addFormVisible = true;
    },
    handleEdit(index, row){
        this.dialogFormVisible = true;
        this.form = row;
    },
    handleCancel(){
      this.dialogFormVisible = false;
      this.addFormVisible = false;
      this.getList();
    },
    handleSure(){
      if(this.form.gender == '男'){
        this.form.gender = 1;
      }
      if(this.form.gender == '女'){
        this.form.gender = 0;
      }
      editTeacher(this.form).then(res => {
        this.$message({
            message: '修改成功',
            type: 'success'
          });
        this.getList();
      })
      this.dialogFormVisible = false;
    },
    handleDownload() {
      this.downloadLoading = true;
      console.log(this.searchObj.title);
      getTeacherExcel(this.searchObj);
      this.downloadLoading = false;
    },
    handleDelete(teacherId){
      deleteTeacher({teacherId}).then( res => {
        this.$message({
            message: '删除成功',
            type: 'success'
          });
        this.getList();
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>